<template>
  <div class="shop-say">
    <!-- 切换时间 -->
    <div class="time_select">
      <h1>时间选择:</h1>
      <ul>
        <li
          v-for="(item, index) in timeSelectList"
          :key="index"
          :class="carIndex === index ? 'active' : ''"
          @click="changeTab(index)"
        >
          {{ item.name }}
        </li>
      </ul>
      <div class="time_select_block">
        <el-date-picker
          v-model="value1"
          type="date"
        />
      </div>
    </div>
    <!-- 分类 查询 -->
    <div class="say_state">
      <!-- 评价状态 -->
      <div class="item_box">
        <h1>评价状态:</h1>
        <el-select
          v-model="value"
          placeholder="请选择评价状态"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <!-- 商品名称 -->
      <div class="item_box">
        <h1 class="search_h1">
          商品搜索:
        </h1>
        <div class="search_frame">
          <el-input
            v-model="shop_input"
            placeholder="请输入商品名称"
          >
            <svg-icon
              slot="append"
              icon-class="search"
            />
          </el-input>
        </div>
      </div>
      <!-- 用户名称 -->
      <div class="item_box">
        <h1 class="search_h1">
          用户名称:
        </h1>
        <div class="search_frame">
          <el-input
            v-model="commitedKeywod"
            placeholder="请输入用户名称"
          >
            <svg-icon
              slot="append"
              icon-class="search"
            />
          </el-input>
        </div>
      </div>
      <!-- 添加虚拟评论 -->
      <div class="add_say">
        <el-button
          type="primary"
          @click="dialogVisible = true"
        >
          添加虚拟评论
        </el-button>
      </div>
    </div>

    <!-- 表格 -->
    <div class="shop_table">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        max-height="400"
        header-align="right"
      >
        <el-table-column
          prop="id"
          label="ID"
          width="50"
        />
        <el-table-column
          prop="shopMsg.title"
          label="商品信息"
          width="200"
        >
          <template slot-scope="scope">
            <img
              :src="scope.row.img"
              alt=""
            >
            <div>{{ scope.row.title }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="用户名称"
        />
        <el-table-column
          prop="shopMark"
          label="商品评分"
          width="100"
        />
        <el-table-column
          prop="serverMark"
          label="服务评分"
          width="100"
        />
        <el-table-column
          prop="pContent"
          label="评价内容"
        />
        <el-table-column
          prop="hContent"
          label="回 复内容"
        />
        <el-table-column
          prop="time"
          label="评价时间"
        />
        <el-table-column
          label="操作"
        >
          <span>回复</span> <span> | </span><span>删除</span>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="35%"
    >
      <div class="box_shop">
        <span>*</span>
        <span>商品:</span>
        <ElUpLoad />
      </div>
      <div class="box_userName">
        <span>*</span>
        <span>用户名称:</span>
        <input type="text">
      </div>
      <div class="box_comment_text">
        <span>*</span>
        <span>评价文字:</span>
        <input type="text">
      </div>
      <div class="box_shop_grade">
        <span>*</span>
        <span>商品分数:</span>
        <div class="block">
          <el-rate v-model="shopGrade" />
        </div>
      </div>
      <div class="box_serve_grade">
        <span>*</span>
        <span>服务分数:</span>
        <div class="block">
          <el-rate v-model="serveGrade" />
        </div>
      </div>
      <div class="box_user_img">
        <span>*</span>
        <span>用户头像:</span>
        <ElUpLoad />
      </div>
      <div class="box_comment_img">
        <span style="color: #7e7f83">评价图片:</span>
        <ElUpLoad />
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >
          提交
        </el-button>
        <el-button @click="dialogVisible = false">
          重置
        </el-button>
      </div>
    </el-dialog>
    <!-- 分页器 -->
    <div class="footer">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :current-page="pageIndex"
        :total="total"
        @current-change="changePage"
      />
    </div>
  </div>
</template>

<script>
import {getCommentList} from '../../api/comment'
import SvgIcon from "../../components/SvgIcon";
import ElUpLoad from "./components/elUpLoad";
export default {
  components: { SvgIcon, ElUpLoad },
  data() {
    return {
      shop_input: "", //商品搜索
      user_input: "", //用户名搜索
      value1: "",
      carIndex: 0,
      commitedKeywod: "",
      timeSelectList: [
        {
          name: "全部",
        },
        {
          name: "今天",
        },
        {
          name: "昨天",
        },
        {
          name: "最近7天",
        },
        {
          name: "最近30天",
        },
        {
          name: "本月",
        },
        {
          name: "本年",
        },
      ],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      tableData: [],
      dialogVisible: false,
      shopGrade: null, //商品分数
      serveGrade: null, //服务分数
      pageIndex: 1,
      pageSize: 5,
      total: 0,
      timer: null,
    };
  },
  watch: {
    commitedKeywod() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.changePage(this.pageIndex, this.pageSize);
      }, 700);
    },
    shop_input(){
      clearTimeout(this.timer);
      this.timer= setTimeout(()=>{
        this.changePage(this.pageIndex, this.pageSize)
      },700)
    }
  },
  created() {
     getCommentList({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          keyword: this.commitedKeywod,
          shopInput: this.shop_input,
          }).then((res) => {
          if (res.code === 20000) {
            this.tableData = res.data;
            this.total = res.total;
          }
        });
  },
  methods: {
    changePage(ind) {
      this.pageIndex = ind;
        getCommentList({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          keyword: this.commitedKeywod,
          shopInput: this.shop_input,
          }).then((res) => {
          if (res.code === 20000) {
            this.tableData = res.data;
            this.total = res.total;
          }
        });
    },
    changeTab(i) {
      this.carIndex = i;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss">
@import "./css/ShopSay.scss";
</style>
